<template>
  <div>
    <!-- “面包屑” -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">数据库管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    
    <!-- 搜索框 -->
    <div style="padding: 10px 0">
      <el-input 
        style="width: 150px" 
        placeholder="请输入部门编号" 
        :suffix-icon="Search"
        v-model="deptno" 
        clearable
      ></el-input>
      <el-input 
        style="width: 150px; margin-left: 5px" 
        placeholder="请输入部门名字" 
        :suffix-icon="Search"
        v-model="dname" 
        clearable
      ></el-input>
      <el-input 
        style="width: 150px; margin-left: 5px" 
        placeholder="请输入部门位置" 
        :suffix-icon="Search"
        v-model="loc" 
        clearable
      ></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load">
        <el-icon><Search /></el-icon>
        <span>搜索</span>
      </el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset">
        <el-icon><Refresh /></el-icon>
        <span>重置</span>
      </el-button>
    </div>
    
    <!-- 增删改按钮 -->
    <div>
      <el-button 
        style="margin-top: 5px; min-height: 40px" 
        type="success" 
        @click="handle_add"
      >
        <el-icon><Plus /></el-icon>
        <span>新增</span>
      </el-button>
      <el-button 
        style="margin-left: 100px; margin-top: 5px; min-height: 40px" 
        type="danger"
      >
        <el-icon><Minus /></el-icon>
        <span>删除</span>
      </el-button>
      <el-button 
        style="margin-left: 100px; margin-top: 5px; min-height: 40px" 
        type="info"
      >
        <el-icon><Edit /></el-icon>
        <span>修改</span>
      </el-button>
    </div>
    
    <!-- 新增弹窗 -->
    <el-dialog title="部门信息" :visible.sync="dialogFormVisible_01" width="30%">
      <el-form>
        <el-form-item label="部门编号" label-width="80px">
          <el-input v-model="form.deptno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" label-width="80px">
          <el-input v-model="form.dname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门位置" label-width="80px">
          <el-input v-model="form.loc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_01 = false">取 消</el-button>
        <el-button type="primary" @click="handle_add_save">确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 修改弹窗 -->
    <el-dialog title="部门信息" :visible.sync="dialogFormVisible_02" width="30%">
      <el-form>
        <el-form-item label="部门编号" label-width="80px">
          <el-input v-model="form.deptno" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" label-width="80px">
          <el-input v-model="form.dname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门位置" label-width="80px">
          <el-input v-model="form.loc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_02 = false">取 消</el-button>
        <el-button type="primary" @click="handle_update_save">确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 表格内容 -->
    <el-table :data="tableData">
      <el-table-column prop="deptno" label="部门编号" width="140"></el-table-column>
      <el-table-column prop="dname" label="部门名称" width="120"></el-table-column>
      <el-table-column prop="loc" label="部门地址"></el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button 
            type="danger" 
            style="min-height: 20px; text-align: center" 
            @click="handle_delete(scope.row)" 
            round
          >
            <el-icon><Minus /></el-icon>
            <span>删除</span>
          </el-button>
          <el-button 
            type="info" 
            style="min-height: 20px; text-align: center" 
            @click="handle_update(scope.row)" 
            round
          >
            <el-icon><Edit /></el-icon>
            <span>修改</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { Search, Refresh, Plus, Minus, Edit } from '@element-plus/icons-vue';

export default {
  name: "Dept",
  components: {
    Search,
    Refresh,
    Plus,
    Minus,
    Edit
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      deptno: 0,
      dname: "",
      loc: "",
      dialogFormVisible_01: false,
      dialogFormVisible_02: false,
      form: {}
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request.get("/dept/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          deptno: this.deptno,
          dname: this.dname,
          loc: this.loc,
        }
      }).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      })
    },
    reset() {
      this.deptno = 0;
      this.dname = "";
      this.loc = "";
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handle_add() {
      this.dialogFormVisible_01 = true;
      this.form = {};
    },
    handle_add_save() {
      request.post("/dept/insert", this.form).then(res => {
        if (res) {
          this.$message.success("新增成功！");
          this.dialogFormVisible_01 = false;
          this.load();
        } else {
          this.$message.error("新增失败！该部门编号已存在。");
          this.dialogFormVisible_01 = false;
        }
      })
    },
    handle_update(row) {
      this.form = row;
      this.dialogFormVisible_02 = true;
    },
    handle_update_save() {
      request.post("/dept/update", this.form).then(res => {
        if (res) {
          this.$message.success("修改成功！");
          this.dialogFormVisible_02 = false;
          this.load();
        } else {
          this.$message.error("修改失败！");
          this.dialogFormVisible_02 = false;
        }
      })
    },
    handle_delete(row) {
      this.form = row;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handle_delete_confirm();
        this.$message.success("删除成功！");
        this.load();
      }).catch(() => {
        this.$message.info("已取消删除。");
      })
    },
    handle_delete_confirm() {
      request.post("/dept/delete", this.form);
    }
  }
}
</script>

<style scoped>

</style>